<template>
  <div class="body">
    <div class="title" style="padding-left: 10px">
      <el-row>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          style="width: 100%"
        >
          <el-form-item label="关键字:">
            <el-input
              v-model="form.keyword"
              size="small"
              placeholder="根据编号搜索"
            ></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button @click="form.keyword = ''">清除</el-button>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </div>
      </el-row>
    </div>
    <div class="alert" style="margin-top: 0">
      <i class="el-icon-info"></i> 数据一共 {{ tableData.counts }} 条
    </div>
    <el-table
      :data="tableData?.items"
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
      fit
    >
      <el-table-column prop="id" label="编号" width="220"  />
      <el-table-column label="题型"  width="80"  >
        <template v-slot="{ row }">
          {{isQuestionType(row.questionType)}}
        </template>
      </el-table-column>
      <el-table-column prop="questionIDs" label="题目编号"  width="220" >
        <template v-slot="{ row }">
          <div class="blue" @click="preview(item.id)" v-for="(item, index) in row.questionIDs" :key="index">{{item.number}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间"  width="180" />
      <el-table-column prop="totalSeconds" label="答题时间(s)"  />
      <el-table-column prop="accuracyRate" label="正确率(%)"   />
      <el-table-column prop="userName" label="录入人"   />
      <el-table-column  label="操作"   >
        <template v-slot="{ row }">
          <el-button
            @click="del(row.id)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageTool
      :total="tableData.counts"
      :paginationPage="form.page"
      :paginationPagesize="form.pagesize"
      @pageChange="pageChangeFn"
      @pageSizeChange="pageSizeChangeFn"
    />
    <QuestionsPreview
     :previewVisible.sync="previewVisible"
     :id="previewId"
    />
  </div>
</template>

<script>
import { questionType } from '@/api/hmmm/constants.js'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import PageTool from '../components/page-tool.vue'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    PageTool,
    QuestionsPreview
  },
  name: 'subjects',
  data () {
    return {
      questionType,
      form: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      tableData: {},
      previewVisible: false,
      previewId: null
    }
  },
  created () {
    this.list()
  },
  methods: {
    // 渲染列表
    async list () {
      const { data } = await randoms(this.form)
      console.log(data)
      this.tableData = data
    },
    // 处理时间格式
    disponseTime (str) {
      return str.replace(/T/, ' ').replace(/.000Z/, '')
    },
    isQuestionType (value) {
      return this.questionType.find((i) => +i.value === +value)?.label
    },
    // 搜索框
    async onSearch () {
      this.list()
    },
    pageChangeFn (page) {
      this.form.page = page
      this.list()
    },
    pageSizeChangeFn (size) {
      this.form.pagesize = size
      this.form.page = 1
      this.list()
    },
    preview (id) {
      this.previewVisible = true
      this.previewId = id
    },
    async del (id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
      await removeRandoms({ id })
      this.$message.success('删除成功')
      this.list()
    }
  }
}
</script>

<style scoped lang="less">
.body {
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 15px 0;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
  .el-row {
    display: flex;
    justify-content: space-between;
    & > div {
      width: 140px;
      .el-button {
        width: 56px;
        height: 32px;
        padding: 0;
        text-align: center;
        line-height: 32px;
        font-size: 12px;
      }
    }
  }
}
</style>
